<template>
  <div class="list">
    <LogoHeader></LogoHeader>

    <section>
      <div>
        <nav>
          <div 
            v-for="item,index of list"
            :key="index"
            @click="handleClick(index)"
            :class="{ active: currentNav === index }"
          >
            {{ item.name }}
          </div>
        </nav>

        <div class="content" ref="content">

          <div ref="items">

            <div class="item" v-for="item,index of list" :key="index">
              <h2>{{ item.name }}</h2>
              <ul>
                <li v-for="item2,index of item.data" :key="index">
                  <img v-lazy="this.baseUrl + item2.imgUrl">
                  <span>{{ item2.name }}</span>
                </li>
              </ul>
            </div>

          </div>

        </div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import LogoHeader from '../components/common/LogoHeader.vue'
import Tabbar from '@/components/common/Tabbar'
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'
//引入$axios
import $axios from '@/api/$axios'

import { ref, onMounted, reactive, nextTick } from "vue"
import { IndexBar } from 'vant'


let itemsHeight = []
const items = ref()
//设置页面滚动
const content = ref()
let bs = null
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  bs = new BScroll(content.value, {
    probeType: 3,
    //不要打开!!!会滚不到最底部
    // observeDOM: true,
    // observeImage: true
  })
  //滚动联动
  bs.on('scroll', ({ y }) => {
    let i = 0
    itemsHeight.find((h, index) => {
      y += h
      if (y > 0) {
        i = index
        return true
      }
    })

    currentNav.value = i
  })

  let allHeight = 0
  //获取所有元素高度
  const els = items.value.querySelectorAll('.item')
  els.forEach((el, index) => {
    itemsHeight[index] = el.offsetHeight

    allHeight += el.offsetHeight
  })

  let height = content.value.offsetHeight - itemsHeight[itemsHeight.length-1]
  bs.maxScrollY = bs.maxScrollY - height - 5 //减5是因为会出现一些偏差
})

const list = reactive([
  {
    name: '推荐',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '新品',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '习茶',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '绿茶',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '乌龙',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '红茶',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '白茶',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '普洱',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '花茶',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '茶具',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  },
  {
    name: '手艺',
    data: [
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      },
      {
        name: '紫砂壶',
        imgUrl: '/img/list/1.jpeg'
      }
    ]
  }
])

//滚动联动
const currentNav = ref(0)
const handleClick = (index) => {
  currentNav.value = index

  let height = 0
  for (let i = 0; i < index; i++) {
    height += itemsHeight[i]
  }
  bs.scrollTo(0, -height, 300)
}
</script>

<style lang="less" scoped>
.list {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: #b0352f;

    img {
      width: 90px;
      height: 40px;
    }

    .search {
      display: flex;
      align-items: center;
      width: 220px;
      height: 30px;
      background-color: #FFFFFF;
      border-radius: 15px;

      i {
        padding: 0 5px;
        color: #ccc;
      }

      span {
        font-size: 14px;
        color: #ccc;
      }
    }

    .kefu {
      font-size: 28px;
      color: #fff;
    }
  }

  section {
    flex: 1;
    overflow: hidden;

    > div {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
      > nav {
        display: flex;
        flex-direction: column;
        width: 92px;
        flex-shrink: 0;
        row-gap: 15px;
        padding: 15px 0;
        border-right: 1px solid #efefef;
        > div {
          line-height: 30px;
          text-align: center;
          font-size: 14px;
        }
        > .active {
          color: #b0352f;
          border-left: 3px solid #b54f4a;
        }
      }

      .content{
        height: 100%;
        overflow: hidden;
        flex: 1;

        .item {
          padding: 25px 0;
          h2 {
            font-size: 18px;
            font-weight: normal;
            text-align: center;
          }

          ul {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            li {
              
              display: flex;
              flex-direction: column;
              align-items: center;
              img {
                width: 53px;
                height: 53px;
              }
            }
          }
        }
      }
    }
  }
}
</style>